<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers WPS Builder Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        .olControlEditingToolbar .olControlModifyFeatureItemInactive {
            background-image: url(../theme/default/img/draw_point_off.png);
        }
        .olControlEditingToolbar .olControlModifyFeatureItemActive {
            background-image: url(../theme/default/img/draw_point_on.png);
        }
        textarea {
            display: block;
            width: 100%;
            height: 3em;
        }
        label {
            display: block;
        }
        .notsupported {
            color: red;
        }
        button {
            display: block;
            margin-top: 10px;
        }
        #docs {
            top: 6em;
            left: 550px;
            position: absolute;
            margin-right: 10px;
        }
    </style>
  </head>
  <body>
    <h1 id="title">WPS Builder Example</h1>

    <div id="tags">
        wps, process, advanced
    </div>

    <div id="shortdesc">Using WPS formats to interact with WPS</div>

    <div id="docs">
        <p>This example shows WPS in action by using the WPSCapabilities,
        WPSDescribeProcess and WPSExecute formats. See
        <a target="_blank" href="wps.js">wps.js</a> for the
        source code. <b>Note: For applications using WPS, the high level
        approach shown in the <a href="wps-client.html">wps-client</a> example
        is recommended instead.</b></p>
        <ol>
            <li>Select a process from the list below the map. The list is
            populated with the result of a WPS GetCapabilities request, parsed
            using <code>OpenLayers.Format.WPSCapabilities::read</code>.</li>
            <li>Fill out the Input form. Hover over fields to get a description.
            Required fields are marked with a "*".
            To use a geometry from the map as input, select the geometry on the
            map (using the pen symbol on the left of the toolbar) and just
            click the field. The form is generated from the object returned by
            <code>OpenLayers.Format.WPSDescribeProcess::read</code></li>
            <li>Click "Execute" and examine the result in the result text area.
            If the result can be parsed as features, it will be displayed on
            the map as well. The process data is sent to the server with the
            serialized XML from <code>OpenLayers.Format.WPSExecute::write</code>,
            which can use a modified
            <code>OpenLayers.Format.WPSDescribeProcess</code> result object as
            input.</li>
        </ol>
    </div>

    <div id="example" style="width:520px">
        <div id="map" class="smallmap"></div>

        <div>
            <select id="processes"><option>Select a process</option></select>
            <p id="abstract"></p>
            <div id="input"></div>
            <div id="output"></div>
        </div>
    </div>
    <script src="../lib/OpenLayers.js"></script>
    <script src="wps.js"></script>
  </body>
</html>
